<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看用例 - {{ case.case_id }}</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/bootstrap-icons.css">
    <style>
        .navbar {
            margin-bottom: 20px;
        }
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .table th {
            width: 20%;
            background-color: #f8f9fa;
        }
        .table td {
            width: 80%;
        }
        .status-badge {
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.8em;
            font-weight: bold;
        }
        .badge-success {
            background-color: #d1e7dd;
            color: #0f5132;
        }
        .badge-warning {
            background-color: #fff3cd;
            color: #664d03;
        }
        .badge-danger {
            background-color: #f8d7da;
            color: #842029;
        }
        .preformatted {
            white-space: pre-wrap;
            word-wrap: break-word;
        }
      /* 添加弹窗样式 */
        .alert-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1050;
            max-width: 350px;
        }
        .alert {
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            animation: slideIn 0.3s ease-out;
        }
        .alert-success {
            background-color: #d1e7dd;
            color: #0f5132;
            border: 1px solid #badbcc;
        }
        .alert-danger {
            background-color: #f8d7da;
            color: #842029;
            border: 1px solid #f5c2c7;
        }
        .alert i {
            margin-right: 10px;
            font-size: 1.2em;
        }
        .alert .close-btn {
            margin-left: auto;
            background: none;
            border: none;
            font-size: 1.2em;
            cursor: pointer;
            color: inherit;
        }
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
    </style>
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-database-fill-gear me-2"></i>网关信息管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">
                            <i class="bi bi-house-door me-1"></i>首页
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/add">
                            <i class="bi bi-plus-circle me-1"></i>添加信息
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/import">
                            <i class="bi bi-file-earmark-excel me-1"></i>导入Excel
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/export">
                            <i class="bi bi-download me-1"></i>导出Excel
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4>用例详情 #{{ case.id }}</h4>
                <div>
                    <span class="status-badge {% if case.automation_status == '已自动化' %}badge-success{% elif case.automation_status == '未自动化' %}badge-warning{% else %}badge-danger{% endif %}">
                        {{ case.automation_status }}
                    </span>
                </div>
            </div>
            <div class="card-body">
                <table class="table table-bordered table-hover">
                    <!-- 基础信息 -->
                    <tr>
                        <th>系统名称</th>
                        <td>{{ case.system_name }}</td>
                    </tr>
                    <tr>
                        <th>版本号</th>
                        <td>{{ case.version }}</td>
                    </tr>
                    <tr>
                        <th>用例编号</th>
                        <td>{{ case.case_id }}</td>
                    </tr>
                    <tr>
                        <th>操作序列</th>
                        <td>{{ case.operation_sequence }}</td>
                    </tr>
                    <tr>
                        <th>模块</th>
                        <td>{{ case.module }}</td>
                    </tr>
                    <tr>
                        <th>对象</th>
                        <td>{{ case.obj or '-' }}</td>
                    </tr>
                    <tr>
                        <th>用例分级</th>
                        <td>{{ case.case_level or '-' }}</td>
                    </tr>
                    <tr>
                        <th>关联需求编号</th>
                        <td>{{ case.related_requirement_id or '-' }}</td>
                    </tr>
                    <tr>
                        <th>变更点</th>
                        <td>{{ case.change_point or '-' }}</td>
                    </tr>

                    <!-- 用例内容 -->
                    <tr>
                        <th>标题</th>
                        <td>{{ case.title }}</td>
                    </tr>
                    <tr>
                        <th>前置操作</th>
                        <td class="preformatted">{{ case.pre_operation or '-' }}</td>
                    </tr>
                    <tr>
                        <th>预期结果</th>
                        <td class="preformatted">{{ case.expected_result }}</td>
                    </tr>
                    <tr>
                        <th>后置操作</th>
                        <td class="preformatted">{{ case.post_operation or '-' }}</td>
                    </tr>

                    <!-- 执行信息 -->
                    <tr>
                        <th>执行结果</th>
                        <td>{{ case.execution_result or '-' }}</td>
                    </tr>
                    <tr>
                        <th>bug编号</th>
                        <td>{{ case.bug_id or '-' }}</td>
                    </tr>
                    <tr>
                        <th>执行版本</th>
                        <td>{{ case.execution_version or '-' }}</td>
                    </tr>
                    <tr>
                        <th>备考</th>
                        <td>{{ case.notes or '-' }}</td>
                    </tr>
                    <tr>
                        <th>实施者</th>
                        <td>{{ case.implementer or '-' }}</td>
                    </tr>
                    <tr>
                        <th>实施日</th>
                        <td>{{ case.implementation_date or '-' }}</td>
                    </tr>

                    <!-- 自动化信息 -->
                    <tr>
                        <th>是否冒烟</th>
                        <td>{{ case.is_smoke or '-' }}</td>
                    </tr>
                    <tr>
                        <th>是否自动化</th>
                        <td>{{ case.is_automated }}</td>
                    </tr>
                    <tr>
                        <th>自动化状态</th>
                        <td>{{ case.automation_status }}</td>
                    </tr>

                    <!-- 数据库信息 -->
                    <tr>
                        <th>数据库校验</th>
                        <td class="preformatted">{{ case.db_verification or '-' }}</td>
                    </tr>
                    <tr>
                        <th>数据库结果</th>
                        <td>{{ case.db_result or '-' }}</td>
                    </tr>

                    <!-- 接口信息 -->
                    <tr>
                        <th>URL</th>
                        <td>{{ case.url or '-' }}</td>
                    </tr>
                    <tr>
                        <th>请求类型</th>
                        <td>{{ case.request_type or '-' }}</td>
                    </tr>
                    <tr>
                        <th>请求参数</th>
                        <td class="preformatted">{{ case.request_params or '-' }}</td>
                    </tr>
                    <tr>
                        <th>api_code</th>
                        <td>{{ case.api_code or '-' }}</td>
                    </tr>
                    <tr>
                        <th>api_msg</th>
                        <td>{{ case.api_msg or '-' }}</td>
                    </tr>

                    <!-- 其他信息 -->
                    <tr>
                        <th>来源工作表</th>
                        <td>{{ case.source_sheet or '-' }}</td>
                    </tr>
                </table>
            </div>
            <div class="card-footer bg-light d-flex justify-content-between">
                <div>
                    <a href="/" class="btn btn-secondary me-2">
                        <i class="bi bi-arrow-left me-1"></i>返回列表
                    </a>
                    <a href="/copy/{{ case.id }}" class="btn btn-success me-2">
                        <i class="bi bi-clipboard me-1"></i>复制用例
                    </a>
                </div>
                <div>
                    <a href="/edit/{{ case.id }}" class="btn btn-warning me-2">
                        <i class="bi bi-pencil me-1"></i>编辑
                    </a>
                    <button class="btn btn-danger" onclick="confirmDelete({{ case.id }}, '{{ case.case_id }}', {{ case.operation_sequence }}, '{{ case.version }}')">
                        <i class="bi bi-trash me-1"></i>删除
                    </button>
                </div>
            </div>
        </div>
    </div>

    {% include 'common/alert.html' %}

    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要删除以下用例吗？</p>
                    <p><strong>版本号：</strong><span id="deleteVersion"></span></p>
                    <p><strong>用例编号：</strong><span id="deleteCaseId"></span></p>
                    <p><strong>操作序列：</strong><span id="deleteOperationSequence"></span></p>
                    <p class="text-danger"><i class="bi bi-exclamation-triangle me-1"></i> 此操作不可撤销，请谨慎操作！</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <a id="confirmDeleteBtn" href="#" class="btn btn-danger">确认删除</a>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/system_suggest.js"></script>
    <script src="/static/js/util.js"></script>
    <script>
        // 确认删除功能
        function confirmDelete(id, caseId, operationSequence, version) {
            document.getElementById('deleteVersion').textContent = version;
            document.getElementById('deleteCaseId').textContent = caseId;
            document.getElementById('deleteOperationSequence').textContent = operationSequence;
            document.getElementById('confirmDeleteBtn').href = '/delete/' + id;

            const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            deleteModal.show();
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 可以添加一些页面交互效果
            console.log('用例详情页面加载完成');
        });

         document.addEventListener('DOMContentLoaded', function() {
        const alerts = document.querySelectorAll('.alert');
        alerts.forEach(function(alert) {
            setTimeout(function() {
                alert.style.opacity = '0';
                alert.style.transform = 'translateX(100%)';
                alert.style.transition = 'opacity 0.3s, transform 0.3s';
                setTimeout(function() {
                    alert.remove();
                }, 300);
            }, 5000);
        });
    });
    </script>
</body>
</html>
